<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 连接列表</title>
	<link rel="stylesheet" href="../dom/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.css">
 <script type="text/javascript" src="../jQuery-2.1.4.min.js" ></script>
 <!--
 <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 --> 
  <script src="../dom/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<!--  <link rel="stylesheet" href="jqueryui/style.css">-->

  <style>
  #sortable1, #sortable2 ,xx{ 
  	list-style-type: none; 
  	margin: 0; 
  	padding: 0 0 2.5em; 
  	float: left; 
  	margin-right: 10px; 
  	border: 1px solid royalblue;
  	}
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
  	var str = '<ul id="sortable1" class="connectedSortable">'
 			 +'<li id="zz" class="ui-state-default" ><div onclick="vv()">vvvvvv</div></li>'
 
				+'</ul>';
//	$("body").prepend(str);
  	

    $( "#sortable1, #sortable2" ).sortable({
 
     
      connectWith: ".connectedSortable"
    })
    .droppable({
    	   drop: function( event, ui ) {
//  	   	  ui.draggable
    	   	console.log($(this).html())
    	   	
    	   	
       
    	   }
    })
    .disableSelection();
  });
  
 function sumNum (ml,mr,pl,pr,bl,br){
				return toNum(ml)+toNum(mr)+toNum(pl)+toNum(pr)+toNum(bl)+toNum(br);
			}
			function toNum(str){
				var num = str.substring(0,str.indexOf("px"))
				return parseInt(num);
			}
			
			function autoWidth(doc){
//				doc 改变的盒子节点
//				console.log($(docId).attr("id"));

				var w = $(doc).width();
				var n = $(doc).children().length;
				var num = 0;
				$(doc).children().each(function(i,ele){
					var ml = $(ele).css("margin-left");
					var mr = $(ele).css("margin-right");
					var pl = $(ele).css("padding-left");
					var pr = $(ele).css("padding-right");
					var bl = $(ele).css("border-left-width");
					var br = $(ele).css("border-right-width");
					num += sumNum(ml,mr,pl,pr,bl,br);
				});
				var subw = (w-num)/n;
//				$(doc).children().width(subw);
				
				$(doc).children().animate({width:subw+'px'},'fast');//fast slow
			}//
  </script>
</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li id="zz" class="ui-state-default" ><div onclick="vv()">vvvvvv</div></li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

</body>
</html>